import DefaultTheme from 'vitepress/dist/client/theme-default'
import hljs from 'highlight.js'
import 'highlight.js/styles/atom-one-dark.css'
import 'normalize.css/normalize.css';
import './custom.less'
import Layout from './Layout.vue'
import HButton from 'components/button'
import HDialog from 'components/dialog'
import HPopup from 'components/popup'
import HLazyload from 'components/lazyload'
import HAddress from 'components/address'

export default {
  ...DefaultTheme,
  Layout,
  enhanceApp({ app, router, siteData }) {
    // app is the Vue 3 app instance from `createApp()`. router is VitePress'
    // custom router. `siteData`` is a `ref`` of current site-level metadata.
    app.use(HButton)
    .use(HDialog)
    .use(HPopup)
    .use(HLazyload)
    .use(HAddress)

    app.directive('highlight',function (el) {
      let blocks = el.querySelectorAll('pre code');
      blocks.forEach((block)=>{
        hljs.highlightBlock(block)
      })
    })
  }
}
